<template>
  <div>
    <el-dialog
      :title="`档案详情——${title}`"
      :visible.sync="showPop"
      width="65%"
      :before-close="dialogVisible"
    >
      <span class="content">
        <div class="left-menu">
          <el-tree
            :data="treeInfo"
            @node-click="handleNodeClick"
            :props="defaultProps"
            node-key="id"
          ></el-tree>
        </div>
        <div class="right-content" v-loading.lock="fullscreenLoading">
          <div class="content-wrapper" v-if="shortDetail || longDetail">
            <div class="duo">
              <div class="duo-row" v-for="sd in shortDetail" :key="sd.recNo">
                <span class="title">{{ sd.fieldAlias }}：</span>
                <span class="specify">{{ sd.fieldValue }}</span>
              </div>
            </div>
            <div class="single" v-for="ld in longDetail" :key="ld.recNo">
              <span class="title">{{ ld.fieldAlias }}：</span>
              <span class="specify">{{ ld.fieldValue }}</span>
            </div>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { searchByTree } from "@/api/search/complex";

export default {
  props: ["showPop", "rowInfo"],
  data() {
    return {
      defaultProps: {
        children: "child",
        label: "title",
      },
      treeInfo: [],
      title: "",
      shortDetail: null,
      longDetail: null,
      fullscreenLoading: false,
    };
  },
  methods: {
    handleNodeClick(treeChild) {
      this.fullscreenLoading = true;
      this.title = treeChild.title;
      this.shortDetail = null;
      this.longDetail = null;
      this.treeSearch(treeChild.id, treeChild.tableName);
    },
    dialogVisible() {
      if (this.showPop) {
        this.$emit("update:showPop", false);
      }
    },
    //根据ID，表名查询具体详情
    treeSearch(id, tableName) {
      searchByTree(id, tableName).then((res) => {
        const shortDetail = res.data.filter((item) => item.isSize == 1);
        const longDetail = res.data.filter((item) => item.isSize == 0);
        this.shortDetail = shortDetail;
        this.longDetail = longDetail;
      }).finally(() => this.fullscreenLoading = false);
    }
  },
  watch: {
    rowInfo: {
      deep: true,
      handler() {
        this.title = this.rowInfo.title;
        this.treeInfo = [this.rowInfo];
        if(this.rowInfo.hasOwnProperty("id")) {
          this.fullscreenLoading = true;
          this.treeSearch(this.rowInfo.id, this.rowInfo.tableName);
        }
      },
    },
  }
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  height: 70vh;
}
.left-menu,
.right-content {
  flex: 0 0 auto;
  border: 2px solid rgb(235, 238, 245);
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}
.left-menu {
  width: 23%;
}
.right-content {
  width: 75%;
}
.content-wrapper {
  border: 1px solid rgb(235, 238, 245);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.specify,
.title {
  padding: 10px;
}
.specify,
.title {
  /* text-overflow: ellipsis; */
  white-space: nowrap;
  white-space:normal;
  overflow: hidden;
}
.title {
  display: inline-block;
  text-align: right;
  background-color: rgb(238, 238, 238);
  width: 150px;
}
.duo {
  display: flex;
  flex-wrap: wrap;
}
.duo-row {
  flex: 0 0 auto;
  width: 50%;
  display: flex;
  justify-content: center;
}
.single {
  display: flex;
  justify-content: center;
}
.duo-row .specify {
  width: 80%;
}
.single .specify {
  width: 90%;
}
.duo-row,
.title,
.single {
  border-bottom: 1px solid rgb(241, 241, 241);
  margin-bottom: -1px;
}
::v-deep .el-dialog__title {
  font-size: 26px !important;
}
</style>
